<template>
  <div>
    <div style="width: 430px; float: right">
      <el-input size="small" @keyup.enter.native="searchEnterFun($event)" placeholder="请输入知识名称" v-model="name">
        <i class="el-input__icon el-icon-search" slot="prefix"></i>
        <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
      </el-input>
    </div>

    <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
      <div style="height: 410px; width: 410px">
        <div :item="item" :key="item.name" v-for="item in items">
          <div style="display: inline-block;text-align: right;width: 100px;margin-top: 10px">
            <span>学科分类</span>
          </div>
          <div style="display: inline-block">
            <el-cascader
              :options="item.tagId"
              :props="cascadeProps"
              :show-all-levels="false"
              @change="handleChange"
              clearable
              placeholder="请选择"
              size="small"
              style="width: 300px"
              v-model="subject"></el-cascader>
          </div>
        </div>
        <div>
          <div style="width: 100px;text-align:right; display: inline-block;margin-top: 10px">应用平台</div>
          <div style="display: inline-block">
            <el-select v-model="platform" placeholder="应用平台" size="small" style="width: 300px">
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
                v-for="item in platforms"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display: inline-block;text-align: right;width: 100px">公式类型</div>
        <div style="display: inline-block;margin-top: 10px">
          <el-select clearable placeholder="公式类型" size="small" style="width: 300px" v-model="type">
            <el-option
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in types">
            </el-option>
          </el-select>
        </div>
        <div>
          <div style="width: 100px;text-align:right; display: inline-block">
            <span>版本号</span>
          </div>
          <div style="display: inline-block">
            <el-input placeholder="请输入版本号" size="small" style="width: 300px;margin-top: 10px"
                      v-model="version"></el-input>
          </div>
        </div>

        <div style="margin-top: 10px; ">
          <div style="width: 100px;text-align:right; display: inline-block">
            <span>编辑人员</span>
          </div>
          <div style="display: inline-block">
            <el-select filterable clearable style="width: 300px; " v-model="editor" placeholder="请选择编辑人员" size="small">
              <el-option
                v-for="item in $store.state.userList"
                :key="item.userName"
                :label="item.name"
                :value="item.userName">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <div style="width: 100px;text-align:right; display: inline-block">
            <span>审核人员</span>
          </div>
          <div style="display: inline-block">
            <el-select filterable clearable style="width: 300px; " v-model="auditor" placeholder="请选择审核人员" size="small">
              <el-option
                v-for="item in $store.state.userList"
                :key="item.userName"
                :label="item.name"
                :value="item.userName">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="block" style="margin-top: 10px">
          <div style="width: 100px;display: inline-block;text-align: right">更新时间</div>
          <div class="block" style="display: inline-block;">
            <el-date-picker
              @change="dateChange"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              size="small"
              start-placeholder="开始日期"
              style="width: 300px;" type="datetimerange"
              v-model="updateTime" value-format=" yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </div>
        <div v-if="this.value == 'published'">
          <div style="width: 100px;text-align:right; display: inline-block;margin-top: 10px">
            <span>是否修订</span>
          </div>
          <div style="display: inline-block">
            <el-select v-model="isRevised" clearable filterable size="small" style="width: 300px">
              <el-option label="否" value="0">否</el-option>
              <el-option label="是" value="2">是</el-option>
            </el-select>
          </div>
        </div>
        <div style="margin-top: 10px; margin-right: 10px;">
          <el-row>
            <el-col :offset="7" :span="9">
              <div style="margin-left: 90px;height: 32px; width: 88px;">
                <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
              </div>
            </el-col>
            <el-col :span="2">
              <div style="margin-left:5px;height: 32px; width: 88px;">
                <el-button size="small" v-on:click="replacement">重置</el-button>
              </div>
            </el-col>
            <el-col :offset="2" :span="1">
              <div style="height: 32px; width: 88px; margin-right: 10px; ">
                <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  name: "CalculatorSearch",
  data() {
    return {
      tableData: [],
      uploadVisible: false,
      componentName: "",
      show: "true",
      noData: false,
      showAdvance: false,
      appendIcon: "el-icon-caret-bottom",
      name: '',
      subject: [],
      searchData: [],
      subjectOptions: [],
      cascadeProps: {multiple: true, checkStrictly: true},
      standardTerminology: "",
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      totalNum: 0,
      platforms: [],
      platform: [],
      updateTime: '',
      editor: '',
      auditor: '',
      types: [{
        value: 1,
        label: '计算型'
      }, {
        value: 2,
        label: '评分型'
      }, {
        value: 3,
        label: '描述型'
      }],
      type: '',
      version: '',
      isRevised: ''
    }
  },
  methods: {
    searchEnterFun(e) {
      const keyCode = window.event ? e.keyCode : e.which;
      if (keyCode === 13) {
        this.confirm()
      }
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    replacement: function () {

      this.subject = ''
      this.updateTime = '',
        this.editor = '',
        this.auditor = '',
        this.version = '',
        this.type = '',
        this.platform = '',
        this.name = '',
      this.isRevised = ''
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    advanceConfirm: function () {
      this.confirm()
    },
    dateChange(val) {
      this.updateTime = val;
      if (val == null) {
        this.updateTime = ''
      }
    },
    handleChange(value) {
      this.subject = value;
      console.log(this.subject);
    },
    confirm: function () {
      let url = ''
      if (this.value == 'unpublished') {
        url = '/pmph/action/medicalCalculator/selectCalculatorList'
      } else {
        url = '/pmph/action/medicalCalculator/selectReleasedCalculatorList'
      }
      this.axios.get(url, {
        params: {
          currentPage: 0, // 第几页
          pageNum: 10, // 每页显示的数据个数
          updateTime: this.updateTime.toString(),
          type: this.type,
          version: this.version,
          editor: this.editor,
          auditor: this.auditor,
          name: this.name,
          subject: JSON.stringify(this.subject),
          platform: this.platform,
          status: this.value,
          isRevised:this.isRevised
        }
      }).then((response) => {
        this.noData = response.data.totalNum <= 0;
        this.searchData = response.data.tableData
        this.totalNum = response.data.totalNum;
        this.$emit('confirm', this.searchData, this.totalNum, this.updateTime, this.type, this.version, this.editor, this.auditor, this.name, this.subject, this.platform,this.isRevised)
        this.showAdvance = false;
      }).catch((error) => {
        console.error(error);
        this.tableData = [];
        this.noData = true;
        this.$message.error("未能请求到数据");
      })
    }
  },
  created() {
    this.axios.get("/pmph/action/medicalCalculator/selectPlatform", {})
      .then((response) => {
        console.log(response)
        this.platforms = response.data
      })
      .catch((error) => {
        this.$message.error("获取名称失败")
      })
    this.axios.get("/pmph/action/medicalCalculator/selectSubject", {
      params: {}
    })
      .then((response) => {
        console.log(response)
        this.items = response.data.fields
        console.log(this.items)
      })
  }
}
</script>

<style scoped>

</style>
